<template>
    <a-form style="max-width: 500px; margin: 40px auto 0;" @submit="handleSubmit" :form="form">
<!--        <a-form-item-->
<!--                label="原密码"-->
<!--                :labelCol="{span: 5}"-->
<!--                :wrapperCol="{span: 19}"-->
<!--                class="stepFormText"-->
<!--                hasFeedback-->
<!--        >-->
<!--            <a-input-password-->
<!--                    placeholder="请输入原密码"-->
<!--                    v-decorator="[-->
<!--                  'oldpassword',-->
<!--                  {rules: [{ required: true, message: '请输入原密码',validateTrigger:  ['change', 'blur'] }]}-->
<!--                ]"-->
<!--                    name="oldpassword"-->
<!--            />-->
<!--        </a-form-item>-->
        <a-form-item
                label="新密码"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 19}"
                class="stepFormText"
                hasFeedback
        >
            <a-input-password
                    placeholder="必须包含大小字母，数字，特殊符号，至少8位密码"
                    v-decorator="[
                  'password',
                  {rules: 
               [{ required: true, message: '必须包含大小字母，数字，特殊符号，至少8位密码'}, { validator: this.handlePass }], validateTrigger: 'blur'}]"
                    name="password"
            />
        </a-form-item>
        <a-form-item
                label="确认密码"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 19}"
                class="stepFormText"
                hasFeedback
        >
            <a-input-password
                    v-decorator="[
                  'confirm_password',
                 {rules: 
               [{ required: true, message: '请输入确认密码'}, { validator: this.handleConfirmPass }], validateTrigger: 'blur'}]"
                    name="confirm_password"
            />
        </a-form-item>
        <a-form-item :wrapperCol="{span: 19, offset: 12}">
            <a-button  type="primary"  @click="handleSubmit" >提交</a-button>
        </a-form-item>
    </a-form>
</template>
<script>
    import { updatePassword  } from "@/services/system/whdngxlApi"
    import md5 from 'md5'
    import {mapActions} from "vuex";
    export default {
        data () {
            return {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 7 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 13 }
                },
                password: '',
                // oldpassword :'',
                // form
                form: this.$form.createForm(this)
            }
        },
        methods: {
          ...mapActions(['Logout','setMenuData']),
          logout() {
            this.Logout().then(()=>{
              this.setMenuData()
            }).catch().finally(()=>{const { $router } = this;

              $router.replace({ name: 'login' });});
          },
            handlePass(rule,value,callback){
                const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@&%#_])[a-zA-Z0-9~!@&%#_]{8,16}$/;
                if ((!reg.test(value)) && value != '') {
                    callback( new Error('必须包含一个大写，一个小写字母，一个数字，一个特殊字符，且长度为8到16位'))}
                else{
                    this.password = value
                    callback()
                }
            },
            handleConfirmPass(rule,value, callback){

                if (this.password && this.password !== value) {
                    callback('两次密码输入不一致！')
                }
                callback()
            },
            getKey(){

            },
            ...mapActions(['Logout','setMenuData']),
            handleSubmit () {
                const params = {}
                this.form.validateFields((err, values) => {
                    if (!err) {
                        // console.log(values);
                        // params.oldUserPassword = md5(values.oldpassword);
                        params.userPassword = md5(values.password);
                    }
                });
                params.userId = this.$store.state.user.userInfo.userId;//'2577581ec48c40948cd4c2c585a9e2f8'
                setTimeout(() => {
                    this.$http.post(updatePassword,JSON.stringify(params))
                        .then((res) => {
                            if(res.result.code==0){
                              this.$message.error(res.result.msg);
                            }else{
                                this.$message.success("修改成功");
                                this.logout()
                            }
                        }).catch(() => {
                    })
                }, 50)
            }
        }
    }
</script>
